<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <h1>
    <span class="label label-info">DEMO 5</span>
  </h1>
  <br>
  <br>
  <br>
  <div class="well" id="well">

  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>

  <script type="text/babel">
    // 要求：编写一个页面，在页面点击按钮开始计时之后，使得age1每隔一秒增加一岁：
    class Text extends React.Component {

      constructor(props) {
        super(props)
        this.state = {
          name1: props.name1,
          age1: props.age1,
          timerID: 0
        }
      }

      // componentDidMount() {
      //   this.state.timerID = setInterval(() => this.addAge1(), 1000)
      // }

      addAge1(startAge, e) {
        this.setState({ age1: startAge })
        // 证明我们是可以拿到 e 的：
        e.preventDefault()
        // setInterval(() => this.setState({
        //   age1: (Number(this.state.age1) + 1) + ""
        // }), 1000)
        setInterval(() => this.setState(prevState => ({
          age1: (Number(prevState.age1) + 1) + ""
        })), 1000)
      }

      render() {
        return (
          <div>
            <div className='dataFromProps'>我是{this.props.name},今年{this.props.age}岁。</div>
            <div className='dataFromState'>我是{this.state.name1},今年{this.state.age1}岁。</div>
            <br/>
            <a href="#" target="_blank" onClick={this.addAge1.bind(this, 520)}>从520开始增加</a>
          </div>
        )
      }
    }

    const textEle = <Text name="张无忌" age="101" name1="无名氏" age1="0"/>     
    ReactDOM.render(
        textEle,
        document.getElementById('well')
    )
  </script>
</body>
</html>